<template>
  <div class="album-wrapper">
    <div class="album" @click="preview">
      <img class="album-img" :src="firstImage" alt="" />
      <div class="album-num" v-if="imgList.length>1">+{{imgList.length - 1}}</div>
    </div>
  </div>
</template>
<script lang="ts" setup name="edTableAlbum">
import { ref, defineProps, watchEffect, onMounted, getCurrentInstance } from 'vue';
import defaultImg from '@/assets/images/placeholderImage.png';
const props = defineProps({
  src: {
    type: [Array, String],
  },
});
const imgList = ref<string[]>([defaultImg]);
let firstImage = ref<string>(defaultImg);
watchEffect(() => {
  if (props.src && props.src.length > 1) {
    if( typeof props.src === 'string' ) {
      let str = props.src as string;
      if(str.indexOf(",")>=0){
        imgList.value = str.split(",");
        firstImage.value = imgList.value[0];
      }else{
        imgList.value = [str];
        firstImage.value = str;
      }
    }else if(Array.isArray(props.src)){
      imgList.value = props.src;
      firstImage.value = imgList.value[0];
    }
  }
});
const instance = getCurrentInstance();
const $viewerApi = instance.appContext.config.globalProperties.$viewerApi;
function preview(){
  console.log("preview:",imgList.value)
  $viewerApi({
    images: imgList.value,
  });
}
</script>
<style lang="less" scoped>
.album-wrapper {
  .album {
    width: 32px; height: 32px; margin:0 auto; border-radius: 4px; position: relative; overflow: hidden; cursor: zoom-in;
    .album-img {
      width: 100%; height: 100%; display: block;
    }
    .album-num {
      position: absolute; right: 0; bottom: 0; left:0; top:0; background: rgba(0, 0, 0, .5); color: #fff; text-align: center; line-height: 32px; font-size: 12px;
    }
  }
}
</style>
